<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    
    <title>首页</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                        <li><a href="./index.html" class="active">企业主页</a></li>
                        <li><a href="./product.html ">产品</a></li>
                        <li><a href="./programme.html">解决方案</a></li>
                        <li><a href="./customer.html">客户案列</a></li>
                        <li><a href="./consult.html">咨询与服务</a></li>
                        <li><a href="./news.html">企业新闻</a></li>
                        <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div style="padding-top: 100px;"></div>
    <main>
        <div class="banner swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/u12.png" alt="">
                    <div class="text_count">
                        <p class="font_33">
                            企业文化
                        </p>
                        <span>
                            <h3 class="font_33">责任 执着 专业 诚信 以用户为中心</h3>
                        </span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="./img/u15.png" alt="">
                    <div class="text_count2">
                        <p class="font_33">
                            企业使命
                        </p>
                        <span>
                            <h3 class="font_33">提供有竞争力的智慧城市解决方案和服<br>
                                务，持续为客户创造最大价值，让我们的<br>
                                城市充满活力！
                            </h3>
                        </span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="./img/u18.png" alt="">
                    <div class="text_count3">
                        <p class="font_33">
                            企业愿景
                        </p>
                        <span>
                            <h3 class="font_33">做中国最优秀的智慧城市服务商</h3>
                        </span>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
          <div class="container">
            <div class="about_box ">
                <div class="left_box">
                    <h3 class="font_30 ">关于我们</h3>
                    <p class="font_30 font_bule margin_50_top">迅游文化科技股份有限公司</p>
                    <p class="font_24 font_gray margin_50_top">迅游文化科技股份有限公司成立于2018年，坐落于中国北京。注册资本XXXX万元人民币，公司主要从事计算机系统服务；软件开发；信息安全技术、智能终端产品设计、研发；软件平台深度开发等业务。截至2021年底，公司共有员工XXX人，其中XXXX以上员工拥有研究生及以上学历。</p>
                    <p class="font_24 font_gray margin_40_top">我们努力打造智慧城市产品及其相关产业链产品，截至2021年底共计为XXXX余家政企单位提供相关技术支持与服务，未来螳螂文化致力于与社会一路同行，共同进步！</p>
                    <ul>
                        <li>
                            <p class="font_40 font_bule">2017<span class="font_24 font_black">年</span></p>
                            <p class="font_24 font_black">成立于</p>
                        </li>
                        <li>
                            <p class="font_40 font_bule">103<span class="font_24 font_black">人</span></p>
                            <p class="font_24 font_black">公司员工</p>
                        </li>
                        <li>
                            <p class="font_40 font_bule">413<span class="font_24 font_black">个</span></p>
                            <p class="font_24 font_black">承接项目</p>
                        </li>
                        <li>
                            <p class="font_40 font_bule">313 <span class="font_24 font_black">家</span></p>
                            <p class="font_24 font_black">服务客户</p>
                        </li>
                    </ul>
                </div>
                <div class="right_box">
                    <!-- <img src="./img/u110.png" alt=""> -->
                    <div class="img">
                        <img src="./img/u110.png" alt="">
                        <div class="btn_box">
                            <span>
                                <p></p>
                            </span>
                            <p class="font_24 margin_10_top font_white">播放视频</p>
                        </div>
                    </div>
                    <p class="font_33 font_bold margin_10_top">公司风采及宣传片</p>
                </div>
              </div>
              <div class="course">
                <h3 class="font_30">企业历程与大事记</h3>
                <div class="box">
                    <div class="event">
                        <ul class="count">
                            <li>
                                <ul class="count_img active">
                                    <li class="">
                                        <img src="./img/u40.png" alt="">
                                    </li>
                                    <hr>
                                    <li>
                                        <p class="font_20">公司于2018.07在北京成立</p>
                                    </li>
                                </ul>
                                <span id="point" class="active"></span>
                                <p class="font_20 margin_10_top font_center">2018.07</p>
                                
                            </li>
                        </ul>
                        <ul class="count">
                            <li>
                                <ul class="count_img">
                                    <li class="">
                                        <img src="./img/u40.png" alt="">
                                    </li>
                                    <hr>
                                    <li>
                                        <p class="font_20">公司研发的软件“智能慧城市中央厨房配送系统”上市，推动传统行业变革</p>
                                    </li>
                                </ul>
                                <span id="point"></span>
                                <p class="font_20 margin_10_top font_center">2019.03</p>
                                
                            </li>
                        </ul>
                        <ul class="count">
                            <li>
                                <ul class="count_img">
                                    <li class="">
                                        <img src="./img/u40.png" alt="">
                                    </li>
                                    <hr>
                                    <li>
                                        <p class="font_20">公司参与中小企业帮扶计划</p>
                                    </li>
                                </ul>
                                <span id="point"></span>
                                <p class="font_20 margin_10_top font_center">2020.02</p>
                                
                            </li>
                        </ul>
                        <ul class="count">
                            <li>
                                <ul class="count_img">
                                    <li class="">
                                        <img src="./img/u40.png" alt="">
                                    </li>
                                    <hr>
                                    <li>
                                        <p class="font_20">公司参与中小企业帮扶计划</p>
                                    </li>
                                </ul>
                                <span id="point"></span>
                                <p class="font_20 margin_10_top font_center">2020.10</p>
                                
                            </li>
                        </ul>
                        <ul class="count">
                            <li>
                                <ul class="count_img">
                                    <li class="">
                                        <img src="./img/u40.png" alt="">
                                    </li>
                                    <hr>
                                    <li>
                                        <p class="font_20">公司产品“智慧城市共享大数平台”上市，致力于提升数据共享能力</p>
                                    </li>
                                </ul>
                                <span id="point"></span>
                                <p class="font_20 margin_10_top font_center">2020.11</p>
                                
                            </li>
                        </ul>
                        <ul class="count">
                            <li>
                                <ul class="count_img">
                                    <li class="">
                                        <img src="./img/u40.png" alt="">
                                    </li>
                                    <hr>
                                    <li>
                                        <p class="font_20">公司参与天使轮融资，共计融资额315万元</p>
                                    </li>
                                </ul>
                                <span id="point"></span>
                                <p class="font_20 margin_10_top font_center">2021.05</p>
                                
                            </li>
                        </ul>
                        <ul class="count">
                            <li>
                                <ul class="count_img">
                                    <li class="">
                                        <img src="./img/u40.png" alt="">
                                    </li>
                                    <hr>
                                    <li>
                                        <p class="font_20">公司产品“智慧城市工业互联网平台”上市</p>
                                    </li>
                                </ul>
                                <span id="point"></span>
                                <p class="font_20 margin_10_top font_center">2022.02</p>
                                
                            </li>
                        </ul>
                        <hr>
                    </div>
                </div>
              </div>
              <div class="cooperate">
                <h3 class="font_33">合作伙伴</h3>
                <ul>
                    <li>
                        <img src="./img/u151.png" alt="">
                    </li>
                    <li>
                        <img src="./img/u152.png" alt="">
                    </li>
                    <li>
                        <img src="./img/u153.png" alt="">
                    </li>
                    <li>
                        <img src="./img/u154.png" alt="">
                    </li>
                    <li>
                        <img src="./img/u155.png" alt="">
                    </li>
                    <li>
                        <img src="./img/u156.png" alt="">
                    </li>
                    <li>
                        <img src="./img/u157.png" alt="">
                    </li>
                </ul>
              </div>
          </div>
    </main>
    <footer>
        <div >
           <div class="count claerFlex">
                <div class="left">
                    <img src="./img/u115.png" alt="">
                    <h3 class="margin_10 font_33 font_white">LOGO</h3>
                </div>
                <div class="center">
                    <ul>
                        <li>
                            <h3 class="font_24">关于我们
                                <ul>
                                    <li>企业文化</li>
                                    <li>企业简介</li>
                                    <li>企业历程</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">企业产品
                                <ul>
                                    <li>企业产品1</li>
                                    <li>企业产品2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">解决方案
                                <ul>
                                    <li>解决方案1</li>
                                    <li>解决方案2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">其他
                                <ul>
                                    <li>客户案列</li>
                                    <li>咨询与服务</li>
                                    <li>企业与新闻</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">加入我们
                                <ul>
                                    <li>校园招聘</li>
                                    <li>社会招聘</li>
                                </ul>
                            </h3>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <h3 class="font_24">微信公众号</h3>
                            <img src="./img/u139.png" alt="">
                        </li>
                        <li>
                            <h3 class="font_24">联系我们</h3>
                            <div>
                                <p>地址：北京市XX路XXX号XXX楼</p>
                                <p>电话：010-XXXXXXXX</p>
                                <p>邮箱：XXXXXXXX@163.com</p>
                            </div>
                        </li>
                    </ul>
                </div>
           </div>
           <p class="font_20 font_white">某某科技有限公司 版权所有 &copy2021-2031</p>
        </div>
    </footer>
</body>
<script src="swiper/swiper-bundle.min.js"></script>
<script>
   window.onload = ()=>{
    var swiper = new Swiper(".mySwiper", {
        loop: true,
        autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
        pagination: {
          el: ".swiper-pagination",
          type:'custom',
        //   bullectClass:'swiper-pagination-bullet',
        //   bulleActiveClass:'my-bullet-active',
          renderCustom:function(swiper,current,total){
            let customPaginationHtml = '';
            for(let i=0;i<total;i++){
                if(i==current -1){
                    customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagintion-customs-active"><span>'
                }else{
                    customPaginationHtml +='<span class="swiper-pagination-customs"><span>'
                }
            }
            return customPaginationHtml;
          }
        },
      });
     let pointArr = document.querySelectorAll('#point');
     let ulbox = document.querySelectorAll('.count_img');
     let evenPar = document.querySelector('.event');
     let box = document.querySelector('.box')
     console.log(evenPar)
     pointArr.forEach((item,index)=>{
        item.addEventListener('click',()=>{
            pointArr.forEach(v=>v.classList.remove('active'))
            item.classList.add('active');
           
            ulbox.forEach(v=>v.classList.remove('active'))
            ulbox[index].classList.add('active');
        })
     })
     evenPar.onmousedown = (e)=>{
        let disX =e.clientX -evenPar.offsetLeft;
        evenPar.onmousemove = function(e){
            let t = e.clientX - disX;
            if(t<=0&&t>=box.offsetWidth - evenPar.offsetWidth){
                evenPar.style.left = t+'px'
            }
        }
        evenPar.onmouseup = function(e){
            evenPar.onmousemove = null;
            evenPar.onmouseup = null
        }
     }
   }
  
</script>
</html>